<template>
  <view class="login-container">
    <view class="login-header">
      
      <text class="title">欢迎登录</text>
    </view>
    
    <view class="login-form">
      <view class="input-group">
        <image class="input-icon" src="/static/icon-user.png" mode="aspectFit"></image>
        <input 
          class="input" 
          placeholder="请输入用户名" 
          v-model="username" 
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="input-group">
        <image class="input-icon" src="/static/icon-password.png" mode="aspectFit"></image>
        <input 
          class="input" 
          password 
          placeholder="请输入密码" 
          v-model="password" 
          placeholder-class="placeholder"
        />
      </view>
      
      <button class="login-btn" @click="login">登 录</button>
      <button class="register-btn" @click="register">注册账号</button>
      
      <view class="forgot-password">
        <text @click="showToast">忘记密码?</text>
      </view>
    </view>
    
    <view class="third-party-login">
      <text class="divider">其他登录方式</text>
      <view class="icon-group">
        <image class="icon" src="/static/icon-wechat.png" @click="wechatLogin"></image>
        <image class="icon" src="/static/icon-qq.png" @click="qqLogin"></image>
        <image class="icon" src="/static/icon-weibo.png" @click="weiboLogin"></image>
      </view>
    </view>
  </view>
</template>

<script>
import config from "@/Config.js";
export default {
  data() {
    return {
      username: '',
      password: '',
      product: []
    }
  },
  methods: {
    register() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    },
    
    login() {
      if(!this.username ) {
        uni.showToast({ 
          title: '请填写用户名', 
          icon: 'none',
          position: 'bottom'
        })
        return
      }
      if( !this.password) {
        uni.showToast({ 
          title: '请填写密码', 
          icon: 'none',
          position: 'bottom'
        })
        return
      }
      uni.showLoading({
        title: '登录中...',
        mask: true
      })
      
      uni.request({
        url: config.config+'/user',
        method: 'GET',
        success: (res) => {
          uni.hideLoading()
          this.product = res.data
          const user = res.data.find(item => 
            item.username === this.username && 
            item.password === this.password
          )
          
          if(user) {
            uni.setStorageSync('token', user.id)
            uni.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 1500,
              success: () => {
                setTimeout(() => {
                  uni.switchTab({
                    url: '/pages/my/my'
                  })
                }, 1500)
              }
            })
          } else {
            uni.showToast({
              title: '用户名或密码错误',
              icon: 'none',
              position: 'bottom'
            })
          }
        },
        fail: () => {
          uni.hideLoading()
          uni.showToast({
            title: '网络错误，请重试',
            icon: 'none',
            position: 'bottom'
          })
        }
      })
    },
    
    showToast() {
      uni.showToast({
        title: '请联系客服重置密码',
        icon: 'none'
      })
    },
    
    wechatLogin() {
      uni.showToast({
        title: '微信登录',
        icon: 'none'
      })
    },
    
    qqLogin() {
      uni.showToast({
        title: 'QQ登录',
        icon: 'none'
      })
    },
    
    weiboLogin() {
      uni.showToast({
        title: '微博登录',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 80rpx;
  height: 100vh;
  background: linear-gradient(to bottom, #f5f7fa, #e4e8eb);
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
}

.logo {
  width: 150rpx;
  height: 150rpx;
  margin-bottom: 30rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.login-form {
  width: 100%;
}

.input-group {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 50rpx;
  padding: 0 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
}

.input-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.input {
  flex: 1;
  height: 90rpx;
  font-size: 28rpx;
  color: #333;
}

.placeholder {
  color: #999;
  font-size: 28rpx;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  background: linear-gradient(to right, #007aff, #007aff);
  color: #fff;
  font-size: 32rpx;
  margin: 20rpx 0;
  box-shadow: 0 10rpx 20rpx rgba(26, 173, 25, 0.3);
}

.register-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  background: transparent;
  color: #007aff;
  font-size: 32rpx;
  border: 1rpx solid #007aff;
  margin-bottom: 40rpx;
}

.forgot-password {
  text-align: right;
  margin-bottom: 60rpx;
}

.forgot-password text {
  color: #999;
  font-size: 26rpx;
}

.third-party-login {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80rpx;
}

.divider {
  color: #ccc;
  font-size: 26rpx;
  position: relative;
  margin-bottom: 40rpx;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 120rpx;
  height: 1rpx;
  background-color: #eee;
}

.divider::before {
  left: -140rpx;
}

.divider::after {
  right: -140rpx;
}

.icon-group {
  display: flex;
  justify-content: center;
  width: 100%;
}

.icon {
  width: 80rpx;
  height: 80rpx;
  margin: 0 40rpx;
}
</style>